<template>
	<view>
		<web-view :src="pdfUrl"></web-view>
		<u-popup :show="show" @close="close">
			<view class="code">
				<view class="set">
					<view class="title">访问码</view>
					<view class="input">
						<input placeholder="输入访问码" v-model="visitCode" type="number" />
					</view>
				</view>
				<button @click="confirm">确定</button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import CryptoJS from "@/node_modules/crypto-js/crypto-js.js"
	export default {
		data() {
			return {
				pdfUrl: '',
				id: '',
				show: false,
				visitCode: '',
				viewerUrl: '/static/pdf/web/viewer.html', //用来渲染PDF的html
				time: '',
				timer:null
			}
		},
		onLoad(option) {
			console.log(window.location.href)
			this.id = window.location.href.split('=')[1].slice(0)
			console.log(this.id)
			this.getCheck()
			this.timer = setInterval(() => {
				this.quitPreview()
			}, 2000);
		},
		onUnload() {
			this.quitPreview()
		},
		methods: {
			quitPreview(){
				let data = {
					serialNo: this.id
				}
				this.api.post('api/file/quitPreview', data).then(res => {
					if (res.code == 200) {
					}else{
						clearInterval(this.timer);
					}
				})
			},
			confirm() {
				if (!this.visitCode) {
					uni.showToast({
						title: '请输入访问码',
						icon: 'none'
					})
					return
				}
				this.getPDFUrl()
			},
			close() {
				this.show = false
			},
			countDown(time) {
				this.time = time
				let t = setInterval(() => {
					if (this.time > 0) {
						this.time--;
					} else {
						clearInterval(t);
						uni.redirectTo({
							url: '/pages/stayPage/stayPage'
						})
					}
				}, 1000);
			},
			getCheck() {
				let data = {
					serialNo: this.id
				}
				this.api.get('api/file/check', data).then(res => {
					if (res.code == 410) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/stayPage/stayPage'
									})
								}
							}
						})
						return
					}
					if (res.code == 411) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/stayPage/stayPage'
									})
								}
							}
						})
						return
					}
					if (res.code == 412) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/stayPage/stayPage'
									})
								}
							}
						})
						return
					}
					if (res.code == 413) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/stayPage/stayPage'
									})
								}
							}
						})
						return
					}
					if (res.code == 201) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.show = true
					}
					if (res.code == 200) {
						this.getPDFUrl()
					}
				})
			},
			getPDFUrl() {
				let data = {
					serialNo: this.id,
					accessCode: this.visitCode,
				}
				this.api.get('api/file/preview', data).then(res => {
					if (res.code == 200) {
						console.log(res)
						let b = CryptoJS.MD5(res.data.code).toString()
						var key = b.substring(16)
						var iv = b.substring(16)
						console.log(key)
						this.pdfUrl = this.AES.decrypt(res.data.access_url, key, iv)
						let url = this.AES.decrypt(res.data.access_url, key, iv)
						this.show = false
						uni.setNavigationBarTitle({
							title: res.data.filename + '_PDF雷达锁'
						});
						this.prviewPdf(url, res.data.access_time)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			prviewPdf(url, time) {
				this.pdfUrl = this.viewerUrl + '?file=' + encodeURIComponent(url);
				if(time != 0){
					this.countDown(time)
				}
			},
		},
	}
</script>

<style>
	.countDown {
		position: fixed;
		right: 0;
		bottom: 200rpx;
		z-index: 9999;
		background: #EB4146;
		color: #fff;
		border-radius: 50%;
		width: 120rpx;
		height: 120rpx;
		padding: 12rpx;
		font-size: 28rpx;
	}

	.code {
		padding: 40rpx 30rpx;
	}

	.title {
		font-size: 30rpx;
		color: #2C2C2C;
	}

	.input {
		border: 1rpx solid #616161;
		border-radius: 10rpx;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
	}

	button {
		background: #FE0000;
		color: #fff;
		margin-top: 80rpx;
		border-radius: 50rpx;
	}
</style>